<template>
  <view class="goods page">
    <pagehead>{{shopType==1?'线上物料':'积分物料'}}</pagehead>
    <scroll-view scroll-x="true" class="tab" v-if="shopType==1" >
      <view v-for="(item,index) in tab" :key="index" :class="[currentIndex == index ? 'active' : '', 'item']"
       @tap="changeTab(index,item)">{{item.name}}</view> 
    </scroll-view>
    <view scroll-x="true" class="tab" v-else >
      <view :class="[currentIndex == 0 ? 'active' : '', 'item','item1']" @tap="changeTab1(0)">机具</view>
      <view :class="[currentIndex == 1 ? 'active' : '', 'item','item1']" @tap="changeTab1(1)">物料</view>
    </view>
    <view v-if="isShowPage">
    <!-- <scroll-view scroll-y class="goods-scroll" @scrolltolower="lower()" v-if="isShowPage"> -->
      <view class="goods-list" v-if="goodsDataList.length != 0">
        <view v-for="(item) in goodsDataList" :key="item.id" class="goods-item"
          @tap.stop="$tools.jump('/pages/goods/goodsDetails', item.id,shopType)">
          <view class="img">
            <init-image :src="imgShow(item.goods_show)" mode="heightFix" />
            <!-- <image :src="imgShow(item.goods_show)" :lazy-load="true" @error="item.goods_show =IMAGE_STATIC+'/images/logo.png'" mode="heightFix" /> -->
            <view class="label" v-if="shopType==1">{{item.goods_base_num+'台' }}</view>
            <view class="label" v-if="shopType==2 && item.pos_name">{{item.pos_name}}</view>
          </view>
          <view class="bottom">
            <view class="name">{{ item.goods_name }}</view>
            <view class="des">{{ item.des }}</view>
            <view class="rate"><text>{{ item.label }}</text></view>
            <view class="price"><text class="unit">￥</text>{{ item.goods_price }}</view>
          </view>
        </view>
      </view>
      <view class="initNoData" v-if="goodsDataList.length == 0">—暂无内容—</view>
    <!-- </scroll-view> -->
  </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      IMAGE_STATIC: this.$url.assetsPath,
      pageIndex: 1,
      pageSize: 10,
      lastId: '',
      lsShow: true,
      isShowPage: false,
      currentIndex: 0,
      shopType:'01', // 01-线上物料 02-积分物料
      goodsType:'01', // 01-机具 02-积分
      goodsDataList: [
        { id: 1, name: '聚合码付（立牌）聚合码付（立牌）', des: '聚合码付（立牌）', rate: 0.1, price: 100 },
        { id: 1, name: '聚合码付（立牌）', des: '聚合码付（立牌）', rate: 0.1, price: 100 },
        { id: 1, name: '聚合码付（立牌）', des: '聚合码付（立牌）', rate: 0.1, price: 100 },
      ],
      tabActive:0,
      tab:[
      ]
    };
  },
  onLoad(options) {
    if(options.value1){
      this.shopType ='0'+ options.value1
    }
  },
  onShow() {
    this.init()
  },
  // 下拉刷新
  onPullDownRefresh() {
    console.log('refresh');
    this.init();
    this.isLoadShow = true;
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
  methods: {
    init() {
      this.pageIndex = 1
      this.pageSize = 10
      this.lastId = '';
      this.goodsDataList = [];
      this.tab = []
      if(this.shopType==1){
        this.getCategoryOneList()
      }else{
        this.getGoodsList();
      }
    },
    // 切换
    changeTab(index,item) {
      if (this.currentIndex != index) {
        this.currentIndex = index
        this.tabActive = item.id
        console.log('goodsType',item.goodsType)
        this.goodsType = item.goodsType
        this.isShowPage = false;
        this.lastId = '';
        this.goodsDataList = [];
        this.getGoodsList()
      }
    },
    // 切换
    changeTab1(index) {
      if (this.currentIndex != index) {
        this.currentIndex = index
        this.goodsType = '0' +(index+1)
        this.isShowPage = false;
        this.lastId = '';
        this.goodsDataList = [];
        this.getGoodsList()
      }
    },
    // 商品列表
    getGoodsList() {
      let that = this;
      var data = {
        shop_type:this.shopType,
        goods_type:this.goodsType,
        last_id:this.lastId
      };
      if(this.shopType==1){
        this.tabActive = this.tab.length>0?this.tab[this.currentIndex].id:''
        console.log('currentIndex',this.currentIndex,',pos_name_id',this.tabActive)
        data['pos_name_id'] = this.tabActive
      }
      console.log("data", data);
      uni.showLoading({
        mask: true
      })
      that.$Ajax('/api/product/getSysProductList', data, res => {
        uni.hideLoading();
        that.isShowPage = true;
        that.goodsDataList = that.goodsDataList.concat(res.data.sysProductList);
        this.total = res.total
        console.log('goodsDataList', this.goodsDataList)
        if(res.data.sysProductList.length>0){
          this.lastId = res.data.sysProductList[res.data.sysProductList.length-1].order_num
          this.lsShow = true
        }else{
          this.lsShow = false
        }
      }, err => {
      }
      );
    },
    // 分类列表
    getCategoryOneList() {
      var data = {
        is_active:'',
      };
      this.$Ajax('/api/system/posName/getSysPosNameList', data, res => {
        if (res.success) {
          this.tab = res.data.sysPosNameList
          this.tab.forEach(item => {
            this.$set(item,'goodsType','01')
          });
          const obj={
            id:'',
            name:'物料',
            goodsType:'02'
          }
          this.tab.push(obj)
          console.log('tab',this.tab)
          this.tabActive = res.data.sysPosNameList[0].id;
          this.tabActiveText = 'item-' + this.tabActive;
          this.getGoodsList()
        }
      }, err => {
      }
      )
    },
    lower() {
      console.log("分页");
      if (this.lsShow == true) {
        this.getGoodsList();
      } else {
        // return this.$tools.toast('到底了');
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  background: #FAFAFA;
}

.goods {
  overflow: hidden;

  .tab {
    // @include flexBetween;
    background: #FFFFFF;
    box-shadow: inset 0rpx 1rpx 0rpx 0rpx #E7E7E7;
    padding: 0 30rpx;
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
    font-size: 14px;
    color: #fff;
    .item {
      max-width: 50%;
      width: 100px;
      display: inline-block;
      text-align: center;
      height: 96rpx;
      line-height: 96rpx;
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.6);
      margin-left: 30px;
    }
    .item1{
      width: 50%;
      margin-left: 0 !important;
    }
    .item:nth-of-type(1){
      margin-left: 0;
    }

    .active {
      font-weight: 600;
      font-size: 32rpx;
      color: #333333;
      position: relative;
    }

    .active::before {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-40rpx);
      content: '';
      width: 80rpx;
      height: 8rpx;
      background: #AD2926;
      border-radius: 70rpx;
    }
  }

  &-scroll {
    overflow: hidden;
    padding-bottom: 60rpx;
  }

  &-list {
    padding: 20rpx;
    @include flexBetween;
    flex-wrap: wrap;
  }

  &-item {
    width: 49%;
    overflow: hidden;
    .img,/deep/ .u-image {
      max-width: 100%;
      height: 342rpx !important;
      text-align: center;
      position: relative;
      image {
        height: 342rpx;
      }
      .label{
        position: absolute;
        top: 20rpx;
        left: 0;
        background: linear-gradient( 143deg, #E15534 0%, #C03733 95%);
        color: #fff;
        font-size: 20rpx;
        padding: 5rpx 10rpx;
        border-radius: 0 30rpx 30rpx 0;
      }
    }
    .bottom {
      background: #fff;
      padding: 24rpx 18rpx;
    }

    .name {
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .des {
      margin-top: 12rpx;
      font-size: 28rpx;
      color: #666666;
    }

    .rate {
      margin-top: 12rpx;

      text {
        font-size: 20rpx;
        color: #AD2926;
        background: #FFF4EE;
        border-radius: 12rpx;
        padding: 6rpx 18rpx;
      }
    }

    .price {
      margin-top: 12rpx;
      font-size: 34rpx;
      font-weight: bold;
      color: #AD2926;
      height: 48rpx;

      .unit {
        font-size: 24rpx;
      }
    }
  }
}
</style>
